import React, {useEffect} from 'react'
import { Layout, Menu } from 'antd';
import {withRouter} from 'react-router-dom'
import style from './index.module.scss'
import {connect} from 'react-redux'

import {
  UserOutlined,
  AppstoreOutlined, 
  MailOutlined, 
  SettingOutlined
} from '@ant-design/icons';
import axios from 'axios'
import {store} from '../../store'

const { Sider} = Layout;
const { SubMenu } = Menu;

const menuList = [
  {
    key: '/home',
    title: '首页',
    icon: <UserOutlined />,
    pagePermission: 1
  },
  {
    key: '/user-manage',
    title: '角色管理',
    icon: <UserOutlined />,
    pagePermission: 1,
    children: [
      {
        key: '/user-manage/list',
        title: '用户列表',
        icon: <UserOutlined />,
        pagePermission: 1
      }
    ]
  },
  {
    key: '/right-manage',
    title: '权限管理',
    icon: <UserOutlined />,
    pagePermission: 1,
    children: [
      {
        key: '/right-manage/role/list',
        title: '角色列表',
        icon: <UserOutlined />,
        pagePermission: 1
      },
      {
        key: '/right-manage/right/list',
        title: '权限列表',
        icon: <UserOutlined />,
        pagePermission: 1
      }
    ]
  },
  {
    key: '/news-manage',
    title: '新闻管理',
    icon: <UserOutlined />,
    pagePermission: 1,
    children: [
      {
        key: '/news-manage/add',
        title: '撰写新闻',
        icon: <UserOutlined />,
        pagePermission: 1
      },
      {
        key: '/news-manage/draft',
        title: '草稿箱',
        icon: <UserOutlined />,
        pagePermission: 1
      },
      {
        key: '/news-manage/category',
        title: '新闻分类',
        icon: <UserOutlined />,
        pagePermission: 1
      }
    ]
  },
  {
    key: '/audit-manage',
    title: '审核管理',
    icon: <UserOutlined />,
    pagePermission: 1,
    children: [
      {
        key: '/audit-manage/audit',
        title: '审核新闻',
        icon: <UserOutlined />,
        pagePermission: 1
      },
      {
        key: '/audit-manage/list',
        title: '审核列表',
        icon: <UserOutlined />,
        pagePermission: 1
      }
    ]
  },
  {
    key: '/release-manage',
    title: '发布管理',
    icon: <UserOutlined />,
    pagePermission: 1,
    children: [
      {
        key: '/release-manage/AlreadyOffline',
        title: '已下线',
        icon: <UserOutlined />,
        pagePermission: 1
      },
      {
        key: '/release-manage/AwaitRelease',
        title: '待发布',
        icon: <UserOutlined />,
        pagePermission: 1
      },
      {
        key: '/release-manage/ReleaseList',
        title: '已发布',
        icon: <UserOutlined />,
        pagePermission: 1
      }
    ]
  }
]
// icon映射表
const iconList = {
  "/home": <UserOutlined />,
  "/user-manage": <AppstoreOutlined />,
  "/user-manage/list": <MailOutlined />,
  "/right-manage": <SettingOutlined />,
  '/news-manage': <UserOutlined />,
  '/news-manage/add': <UserOutlined />,
  '/news-manage/draft': <UserOutlined />,
  '/audit-manage': <UserOutlined />,
  '/audit-manage/audit': <UserOutlined />,
  '/audit-manage/list': <UserOutlined />
}

const {role: {rights}} = JSON.parse(localStorage.getItem('token'))

const checkPagePermission = (item) => {
  return item.pagePermission === 1 && rights.includes(item.key)
}

function SiderMenu(props) {
  console.log(props, 'siderMenu')
  
  useEffect(() => {
    return () => {
      axios.get('http://localhost:8000/')
    }
  }, [])

  const renderMenu = function(menuList) {
    return menuList.map(item => {
      if (item.children?.length > 0 && checkPagePermission(item)) {
        return <SubMenu 
                key={item.key} 
                icon={iconList[item.key]}  
                title={item.title}>
                  { renderMenu(item.children) }
                </SubMenu>
      }
      return checkPagePermission(item) && <Menu.Item 
              key={item.key} 
              icon={iconList[item.key]}
              onClick={() => {
                props.history.push(item.key)
              }}>
                {item.title}
              </Menu.Item>
    })
  }

  const openKeys = [`/${props.location.pathname.split('/')[1]}`]
  const selectKeys = [props.location.pathname]
  return (
    <Sider trigger={null} collapsible collapsed={props.collapsedFlag}>
      <div style={{display: 'flex', height: '100%', "flexDirection": 'column'}}>
        <div className={style.logo}>
          <span>行星发动机机组管理系统</span>
          <span>苏拉威西三号机组</span>
        </div>
        <div className={style.mainBox}>
          <Menu 
            theme="dark" 
            mode="inline" 
            defaultSelectedKeys	={selectKeys}
            defaultOpenKeys={openKeys}
          >
            {renderMenu(menuList)}
          </Menu>
        </div>
      </div>
    </Sider>
  )
}
const mapStateToProps = ({DataReducer: {collapsedFlag}}) => {
  return {
    collapsedFlag
  }
}
export default connect(mapStateToProps)(withRouter(SiderMenu))